<template>
	<gui-page ref="guiPage" :customHeader="true">
		<!-- 导航 -->
		<template v-slot:gHeader>
			<nav-bar-custom left-icon="left" :title="$t('taskList.solidManagement')"></nav-bar-custom>
		</template>
		<template v-slot:gBody>
			<view class="barcodeSplitting page-auto" :style="'height: calc(100vh - ' + navHeight + 'px);'">
				<!-- 扫描条码部分 -->
				<view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x distributed-head">
					<view class="custom-card-title">
						<text class="title-line"></text>
						{{ $t('taskList.scanningCard') }}
					</view>
					<view class="gui-form-item gui-border-b" style="padding: 0 0 20rpx;">
						<text class="item-info-title" style="padding-right: 40rpx;">
							<text class="required-color">*</text>
							{{ $t('taskList.cardNo') }}
						</text>
						<uni-easyinput class="uni-mt-5" :focus="data.isfocus" suffixIcon="scan" v-model="data.barcode"
							:placeholder="$t('taskList.pleaseScanCard')" @confirm="confirm" @iconClick="iconClick">
						</uni-easyinput>
					</view>
				</view>
				<!-- 提示信息 -->
				<view class="gui-flex gui-rows gui-nowrap gui-align-items-center gui-margin-top">
					<view class="gui-title-line"></view>
					<text class="gui-primary-text gui-h6" style="padding-left:50rpx; padding-right:50rpx;">{{
						$t('taskList.cardInfor') }}</text>
					<view class="gui-title-line"></view>
				</view>
				<!-- 卡片模块 -->
				<scroll-view :show-scrollbar="false" :scroll-y="true" class="scroll element-auto">
					<view style="height: 15rpx"></view>
					<view v-if="data.barcodeInfo" class="card-boxCustom">
						<view class="card-body">
							<view class="custom-card-title">
								<text class="title-line"></text>
								{{ $t('finishedInventory.scanInformation') }}
							</view>
							<view class="custom-card-itemOne">
								<text class="body-item-title">{{ $t('taskList.cardNo') }}：</text>{{
									data.barcodeInfo.cardCode }}
							</view>
							<view class="custom-card-itemOne">
								<text class="body-item-title">{{ $t('taskList.assetType') }}：</text>
								{{ data.barcodeInfo.assetClass }}
							</view>
							<view class="custom-card-itemOne">
								<text class="body-item-title">{{ $t('taskList.assetName') }}：</text>
								{{ data.barcodeInfo.assetName }}
							</view>
							<view class="custom-card-itemOne">
								<text class="body-item-title">{{ $t('taskList.purchaseDate') }}：</text>
								{{ data.barcodeInfo.specification }}
							</view>
							<view class="custom-card-itemOne">
								<text class="body-item-title">{{ $t('taskList.assetNo') }}：</text>
								{{ data.barcodeInfo.assetCode }}
							</view>
							<view class="custom-card-itemOne">
								<text class="body-item-title">{{ $t('taskList.warrantyPeriod') }}：</text>
								{{ data.barcodeInfo.assetsNumber }}
							</view>
							<view class="custom-card-itemOne">
								<text class="body-item-title">{{ $t('distributedEnter.uom') }}：</text>
								{{ data.barcodeInfo.unit }}
							</view>
							<view class="custom-card-itemOne">
								<text class="body-item-title">{{ $t('setting.organization') }}：</text>
								{{ data.barcodeInfo.assetOrg }}
							</view>
							<view class="custom-card-itemOne">
								<text class="body-item-title">{{ $t('finishedInventory.creator') }}：</text>
								{{ data.barcodeInfo.createUserName }}
							</view>
							<view class="custom-card-itemOne">
								<text class="body-item-title">{{ $t('taskList.startUse') }}：</text>
								{{ data.barcodeInfo.startDate }}
							</view>
						</view>
					</view>
				</scroll-view>
				<!-- 底部确定按钮 -->
				<view class="page-bottom-box bottom-postion">
					<view class="page-bottomBtn bottomBtn-bgcolor-green" @click="printConfirmation">
						{{ $t('multilingual.print') }}</view>
				</view>
			</view>
		</template>
	</gui-page>
</template>

<script setup>
import { reactive, onMounted, computed } from 'vue'
import pdaScan from '@/hooks/pdaScan.js'
import { scanAssetCard_PDA, printCardAssets } from '@/api/api.js'
import { BIGBARCODER_PRINT } from '@/constant/index.js'
import { basPdaOperationLogFn } from '@/utils/index.js';
import { OPERATION_PRINT, OPERATION_SCAN } from '@/constant/index.js'
import { TEST_URL, PROD_URL } from "@/constant/config.js"
import { SET_BASEURL } from "@/constant/index.js" // 设置的请求地址
import { PRINT_BASE_URL } from "@/constant/config.js"
import { onShow } from '@dcloudio/uni-app';
import { useStore } from "vuex";

//JS国际化引入
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
//打印机地址
let printUrl = PRINT_BASE_URL

let store = useStore()
let data = reactive({
	isfocus: false,
	barcode: '',
	barcodeInfo: null,
})
const { scan } = pdaScan()
const navHeight = computed(() => {
	return store.state.navHeight
})
onShow(async () => {
	//没有设置默认打印机则去提示设置默认打印机
	const defaultValue = uni.getStorageSync(BIGBARCODER_PRINT) || ''
	if (defaultValue == '') {
		uni.showModal({
			content: t('JsInternational.plsPrinter'),
			showCancel: false,
			confirmText: t('pageTranslation.toSet'),
			success: function (res) {
				if (res.confirm) {
					uni.navigateTo({
						url: '/pages/setting/printer'
					})
				} else if (res.cancel) {

				}
			}
		});
	}
})
onMounted(() => {
	console.log('开始监听PDA扫码')
	uni.$on('scancodedate', (data) => {
		console.log('获取到的code：' + data.code)
		getCode(data.code, 'pda')
	})
	setTimeout(() => {
		data.isfocus = true
	}, 1000)
})
// 用户调起相机扫码
const iconClick = async (type) => {
	console.log(type)
	if (type === 'suffix') {
		let code = await scan()
		getCode(code, 'scan')
	}
}
// 用户点击键盘上搜索
const confirm = () => {
	getCode(data.barcode, 'keydown')
}
// 获取code
const getCode = (code, type) => {
	data.barcode = code
	if (!code) {
		uni.showToast({ title: t('stockManage.pleaseScanCode'), icon: "none" });
		return
	}
	let parmes = {
		assetCode: code
	}
	scanAssetCard_PDA(parmes).then(res => {
		try {
			let inputParameter = JSON.stringify(parmes)
			let returnParameter = JSON.stringify(res)
			let operationPicture = '固资管理'
			let callInterface = res.rquestUrl
			let opertionParmes = {
				inputParameter,
				returnParameter,
				operationPicture,
				callInterface,
				responseCode: res.status,//返回状态
				errorMessage: res.message,//错误信息
				isPass: res.status == 200 ? 'Y' : 'N',//是否成功 Y N
				operationType: OPERATION_SCAN
			}
			basPdaOperationLogFn(opertionParmes)
		} catch (error) {
		}
		if (res.status == 200) {
			data.barcodeInfo = res.data
		} else {
			data.barcodeInfo = undefined
			uni.showToast({ title: res.message, icon: "none" });
		}
	})
}
const printConfirmation = () => {
	if (data.barcodeInfo == null) {
		uni.showToast({ title: t('stockManage.pleaseScanCode'), icon: "none" });
		return
	}
	uni.showModal({
		title: t('Common.prompt'),
		content: t('taskList.whetherToPrint'),
		confirmText: t('index.yes'),
		cancelText: t('index.no'),
		success: function (res) {
			if (res.confirm) {
				handelPrint()
			} else if (res.cancel) {
				console.log('用户点击取消');
			}
		}
	});
}
// 打印
const handelPrint = () => {
	if (data.barcodeInfo == null) {
		uni.showToast({ title: t('stockManage.pleaseScanCode'), icon: "none" });
		return
	}
	let defaultValue = uni.getStorageSync(BIGBARCODER_PRINT) || ''
	let parmase = {
		cardCode:data.barcodeInfo.cardCode,
		// PrinterIp: uni.getStorageSync(BIGBARCODER_PRINTID) || '',
		printerName: defaultValue //打印机名字
	}
	uni.showLoading({
		title: t('materials.connecting')
	});
	printCardAssets(parmase).then(res => {
		try {
			let inputParameter = JSON.stringify(parmase)
			let returnParameter = JSON.stringify(res)
			let operationPicture = '固资管理'
			let callInterface = res.rquestUrl
			let opertionParmes = {
				inputParameter,
				returnParameter,
				operationPicture,
				callInterface,
				responseCode: res.statusCode,//返回状态
				errorMessage: res.message,//错误信息
				isPass: res.statusCode == 200 ? 'Y' : 'N',//是否成功 Y N
				operationType: OPERATION_PRINT
			}
			basPdaOperationLogFn(opertionParmes)
		} catch (error) {
		}
		uni.hideLoading();
		if (res.statusCode == 200) {
			uni.showToast({ title: t('JsInternational.printSuccessfully'), icon: "none" });
		} else {
			uni.showToast({ title: res.message, icon: "none" });
		}
	})
}

</script>

<style lang="scss" scoped>
.barcodeSplitting {
	display: flex;
	flex-direction: column;
	height: calc(100vh - 88rpx);
	// height: 100vh;
}

.distributed-head {
	border-bottom-left-radius: 16rpx;
	border-bottom-right-radius: 16rpx;
}

.scroll {
	flex: 1;
	height: 2rpx;
}

@media (prefers-color-scheme: dark) {
	.custom-card-title {
		color: #fff !important;
	}
}
</style>
